<template>
    <Modal v-model="modalShow" title="附件预览" fullscreen footer-hide @on-visible-change="remove_fileType" width="768" :styles="styles">
        <div v-show="modalShow">
            <div v-if="fileType=='file'" style="width:736;margin:auto;">
                <h3>暂不支持该格式文件预览</h3>
            </div>
            <div v-if="fileType=='image'" style="width:736;margin:auto;">
                <img width="736px" :src="fileUrl" alt="">
            </div>
            <div v-if="fileType=='video'" style="width:736;margin:auto;">
                <video :src="fileUrl" width="736" height="414" controls="controls" autoplay="autoplay">
                    <source :src="fileUrl" type="video/ogg" />
                    <source :src="fileUrl" type="video/mp4" />
                    <source :src="fileUrl" type="video/webm" />
                    <object :data="fileUrl" width="736" height="414">
                        <embed width="736" height="414" :src="fileUrl" />
                    </object>
                </video>
            </div>
            <div v-if="fileType=='audio'" style="width:736;margin:auto;">
                <audio :src="fileUrl" controls="controls">
                    播放器不支持该格式音频
                </audio>
            </div>
            <div v-if="fileType=='word'||fileType=='excel'||fileType=='ppt'" :style="{height:Height,margin:'auto'}">
                <iframe :src="'https://view.officeapps.live.com/op/view.aspx?src='+fileUrl" width='100%' height='100%' frameborder='1'>
                </iframe>
            </div>
            <div v-if="fileType=='pdf'" :style="{height:Height,margin:'auto'}">
                <embed :src="fileUrl" type="application/pdf" width="100%" height="100%">
            </div>
        </div>
    </Modal>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            modalShow: false,
            fileType: null,
            fileUrl: "",
            styles: {},
            Height: "700px"
        };
    },
    computed: {},
    methods: {
        remove_fileType(data) {
            if (!data) {
                this.fileType = "file";
            }
        },
        Views(url) {
            this.fileType = this.$util.fileTypeChange(url);
            this.fileUrl = url;
            if (
                this.fileType == "word" ||
                this.fileType == "excel" ||
                this.fileType == "ppt" ||
                this.fileType == "pdf"
            ) {
                let w =
                    document.documentElement.clientWidth ||
                    document.body.clientWidth;
                let h =
                    document.documentElement.clientHeight ||
                    document.body.clientHeight;
                this.Height = h - 184 + "px";
                w = w - 100 + "px";
                h = h - 40 + "px";
                this.styles = {
                    top: "0px",
                    padding: "20px",
                    width: w,
                    height: h
                };
            } else {
                this.styles = { width: "768px" };
            }
            this.modalShow = true;
        }
    },
    mounted() {}
};
</script>

<style scoped>
</style>